@import "./../theme";
@import "./../var";
@import "./widget-vars";

$table-cell-padding: 5px;
.widget-table {
  padding: $widget-item-common-padding;
  background: transparent;
  position: relative;
  border-radius: $radiusRegular;
  margin: $widget-item-common-margin 0;

  .max-limit-tip {
    color: $colorTextInfo;
    font-size: $fontSizeSmall;
    margin-left: 1rem;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .el-table__header-wrapper {
    .el-table__cell {
      padding: 0 !important;
      color: $colorTextSecondary !important;
      font-weight: normal !important;
      font-size: $fontSizeRegular;
    }
  }

  .el-table__fixed-header-wrapper {
    .el-table__cell {
      padding: 0 !important;
    }
  }

  .el-table__body-wrapper {
    .el-table__cell {
      padding: $table-cell-padding 0 !important;
      color: $colorTextSecondary !important;
      font-weight: normal !important;
      font-size: $fontSizeRegular;

      & > .cell {
        padding: 0 $table-cell-padding !important;
      }
    }
  }

  .widget-table-wrapper {
    min-height: $widget-min-height;
    background: $widget-container-bg;
    display: flex;
    justify-content: flex-start;

    .widget-table-left {
      width: 50px;
      border: 1px solid $borderColorPrimary;
      flex: none;

      .el-table__body-wrapper {
        overflow: hidden;
      }

      .el-table__fixed {
        min-height: 88px !important;
      }
    }

    .widget-table-row {
      td {
        border-bottom: 0;
      }

      .el-form-item__label {
        display: none;
      }

      .el-form-item__content {
        margin-left: 0 !important;
      }
    }

    .widget-table-content {
      background: $bgColorPrimary;
      flex: 1;
      margin: 0;
      overflow: hidden;
      overflow-x: auto;
      position: relative;
      border: 1px solid $borderColorPrimary;
      border-left-color: transparent;

      .table-empty {
        position: absolute;
        text-align: center;
        width: 300px;
        height: 20px;
        font-size: $fontSizeLarge;
        top: 20px;
        left: 50%;
        margin-left: -150px;
        color: rgba(0, 0, 0, 0.15);
      }

      & > div {
        height: 100%;
      }

      .widget-table-col {
        height: 100%;

        .ghost {
          @include ghost;
          width: 200px;
          float: left;
          box-sizing: border-box;
          height: 100%;

          &:after {
            height: 0 !important;
          }
        }
      }
    }

    .widget-table-view {
      border: 1px transparent solid;
      border-right-color: $borderColorPrimary;
      width: 200px;
      float: left;
      height: 100%;
      position: relative;
      display: block;

      &.ghost {
        @include ghost;
        border: none !important;

        &:after {
          height: 0 !important;
        }
      }

      .el-table {
        height: 100%;
      }

      .el-table th.required > div::before {
        content: '*';
        color: $colorDanger;
        margin-right: $common-size-small;
        background: transparent;
        vertical-align: top;
      }

      &.is-required {
        .el-form-item__label::before {
          content: '*';
          color: $colorDanger;
          margin-right: $common-size-small;
        }
      }

      &.is_hidden {
        th, td {
          background: $colorDangerLighten;
        }
      }

      &::before {
        display: none;
      }

      &:hover {
        border: 1px solid $colorPrimaryLighten;
      }

      &.active {
        border: 1px solid $colorPrimary;
      }
    }

    &.mobile {
      display: block;
      border: 1px solid $borderColorLight;
      background: $bgColorSecondary;
      border-radius: $radiusRegular;
      overflow: hidden;

      .widget-table-top {
        height: 2rem;
        line-height: 2rem;
        padding: 0 $common-size-large;
        background: $bgColorSecondary;
        border-bottom: none;
        font-weight: 500;
      }

      .widget-table-view {
        border: 1px dashed $borderColorLight;
        width: calc(100% - 6px);
        float: unset;
        height: auto;
        position: relative;
        display: block;
        margin: 5px 3px 0;

        &.is_hidden {
          background: $colorDangerLighten;
        }
      }

      .widget-table-content {
        min-height: 100px;
        border: none !important;
        padding: 0.1rem 0;

        .widget-table-col {
          height: 100%;

          .widget-table-view {
            border-radius: $radiusRegular;
            padding: 0 0.3rem;

            &:hover {
              outline: 1px dashed $colorPrimaryLighten;
            }

            &.active {
              outline: 1px dashed $colorPrimary;
            }
          }

          .ghost {
            @include ghost;
            width: 100% !important;
            float: none;
            min-height: 5rem !important;

            &:after {
              height: 1rem !important;
            }
          }
        }
      }
    }

  }

  &.active {
    background: $widget-container-bg-active;
  }

  &:hover {
    background: $widget-container-bg-hover;

    &.active {
      background: $widget-container-bg-hover-active;
    }
  }

  &::after {
    display: none;
  }
}

.widget-table-view {

  &.ghost {
    @include ghost;
  }

  &.is-hidden {
    opacity: 0.5;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border: 2px solid $colorTextPrimary;
      background-image: linear-gradient(-45deg, $colorTextPrimary 0, $colorTextPrimary 10%, transparent 10%, transparent 50%, $colorTextPrimary 50%, $colorTextPrimary 60%, transparent 60%);
      background-size: 10px 10px;
      background-position: center;
      opacity: 0.1;
      z-index: 8;
      display: block !important;
    }
  }

  &.has-error {
    outline: $colorDangerActive 1px dashed !important;

    .error-tip {
      height: 1.4rem;
      line-height: 1rem;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      color: $colorTextInverse;
      background: $colorDangerActive;
      font-size: $fontSizeSmall;
      padding: 0.2rem 0.7rem;
      border-radius: $radiusSmall;
    }
  }
}
